<template>
    <div class="deposit">

        <!--S头-->
        <i-header>{{money}}</i-header>
        <!--E头-->

        <!--S提现列表-->
        <div id="list">
            <cube-scroll
                    ref="scroll"
                    v-if="data.length > 0"
                    :options="scroll_option"
                    @pulling-up="upLoad"
                    @pulling-down="downRefresh"
            >
                <item v-for="item in data" :data="item" :key="item.id"></item>
            </cube-scroll>
            <empty v-else>暂无提现记录</empty>
        </div>
        <!--E提现列表-->

        <!--S底部全部提现按钮-->
        <div id="footer">
            <cube-button
                    :disabled="apply_button_disabled"
                    @click="submit"
            >
                申请提现
            </cube-button>
        </div>
        <!--E底部全部提现按钮-->
    </div>
</template>

<script>
//提现
import IHeader from "./components/header"
import Item from './components/item'
import Empty from "../../../../components/empty/Empty";
export default {
    name: "deposit",
    data() {
        return {
            money: '',
            data: [],
            limit: [0,20],
            // 滚动条配置
            scroll_option: {
                pullUpLoad:{
                    txt:{
                        more:"上拉加载",
                        noMore:"----我也是有底线的----"
                    }
                },
                pullDownRefresh: {
                    txt: '刷新成功'
                }
            },
            // 是否正在加载中
            loading: false,
            // 是否正在提现请求中
            depositing: false
        }
    },
    components: {
        IHeader,
        Item,
        Empty
    },
    computed: {
      apply_button_disabled () {
          return this.depositing
      }
    },
    mounted() {
        this.getMoney()
        this.getList()
    },
    methods: {
        /**
         * 获取用户余额
         */
        getMoney() {
            this.$sendGet("deposit/money")
                .then((res) => {
                    this.money = res.data.data
                })
        },
        /**
         * 获取列表
         */
        getList(refresh){
            if(this.loading) return
            this.loading = true
            this.$sendGet("deposit",{
                limit: this.limit
            })
                .then((res) => {
                    this.loading = false
                    let data = res.data.data
                    this.limit[0] += this.limit[1]
                    if(data.length > 0) {
                        if(refresh) {
                            this.data = []
                        }
                        this.$refs.scroll && this.$refs.scroll.forceUpdate(true,false)
                        this.data.push(...data)
                    } else {
                        this.$refs.scroll && this.$refs.scroll.forceUpdate(true,true);
                    }
                })
        },
        /**
         *上拉加载
         */
        upLoad() {
            this.getList()
        },
        downRefresh() {
            this.limit = [0,20]
            setTimeout(() => {
                this.getList(true)
            }, 1000)
        },
        /**
         * 提现
         */
        submit() {
            if(!this.checkSubmit() || this.depositing) return
            this.depositing = true
            this.$sendPost("deposit")
                .then((res) => {
                    this.depositing = false
                    let data = res.data.data
                    this.getMoney()
                    if(this.data.length <= 0) {
                        this.getList()
                    }
                    this.$createToast({
                        time: 1000,
                        txt: data === 'wx' ? '提现成功' : '提现申请已提交，等待审核',
                        type: 'correct',
                        mask: true
                    }).show()
                })
                .catch((error) => {
                    this.depositing = false
                    this.$handleError(error,this)
                })
        },
        /**
         * 提现验证
         */
        checkSubmit() {
            if(parseFloat(this.money) <= 0) {
                this.$createToast({
                    txt: '余额不足',
                    type: 'error',
                    mask: true
                }).show()
                return false
            }
            return true
        }
    }
}
</script>

<style scoped lang="less" src="./deposit.less"></style>
